* {
    margin: 0;
    padding: 0;
}

#app {
    margin: 100px auto;
    height: 80vh;
    padding: 0 100px;
}

#app .img_item {
    float: left;
    width: 100px;
    height: 100%;
    /* background-color: red; */
    background-position: center;
    background-size: cover;
    margin-right: 30px;
    border-radius: 80px;
    transition: width .3s ease-out;
}

#app .img_item:last-child {
    margin-right: 0px;
}

#app .img_item.active {
    width: 60%;
    animation: clipCircleIn .6s ease-out;
}

@keyframes clipCircleIn {
    0% {
        clip-path: circle(0 at 50% 50%);
    }
    100% {
        clip-path: circle(100% at 50% 50%);
    }
}

@keyframes clipSectorIn {
    0% {
        clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);
    }
    50% {
        clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
    }
    100% {
        clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
    }
}